<template>
  <!-- 互联代售  推送的商品 -->
  <div class="app-container">
    <div class="" v-loading="loading">
      <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item el-form-item label="供货店铺" prop="supplyTenantId" >
          <el-select v-model="queryParams.supplyTenantId" placeholder="请选择店铺" clearable filterable size="small">
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="channelType">
          <el-select v-model="queryParams.channelType" placeholder="请选择类型" clearable >
            <el-option label="接口" :value="1" />
            <el-option label="客服上架" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态" prop="saleState">
          <el-select v-model="queryParams.saleState" placeholder="请选择商品状态" clearable >
            <el-option v-for="(item,key) in statusMap" :key="key" :label="item.name" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="接口渠道" prop="config">
          <el-select v-model="queryParams.config" placeholder="请选择" clearable filterable>
            <el-option v-for="dict in allQudaoList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="游戏" prop="gameId">
          <el-select filterable v-model="queryParams.gameId" placeholder="请选择游戏" clearable >
            <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="游戏账号" prop="accountNumber">
          <el-input v-model="queryParams.accountNumber" placeholder="请输入游戏账号" clearable />
        </el-form-item>
        <el-form-item label="推送账号" prop="tuisongAccount">
          <el-input v-model="queryParams.tuisongAccount" placeholder="请输入推送账号" clearable />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodsId">
          <el-input v-model="queryParams.goodsId" placeholder="请输入商品编号" clearable />
        </el-form-item>
        <el-form-item label="三方编号" prop="sanfangId">
          <el-input v-model="queryParams.sanfangId" placeholder="请输入三方编号" clearable />
        </el-form-item>
        <el-form-item label="同步状态" prop="duijieType">
          <el-select v-model="queryParams.duijieType" placeholder="请选择" clearable>
            <el-option label="已对接" :value="1" />
            <el-option label="未对接" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="">
          <el-date-picker style="width:300px" clearable v-model="timer" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="table_box table_box_new">
        <el-table stripe border  :data="tableData">
          <!-- <el-table-column label="序号" prop="id" width="80" /> -->
          <el-table-column label="供货店铺" prop="supplyTenantName" width="150"></el-table-column>
          <el-table-column label="游戏" prop="gameName"></el-table-column>
          <el-table-column label="游戏账号" prop="accountNumber" width="150"></el-table-column>
          <el-table-column label="推送账号" prop="tuisongAccount" width="150"></el-table-column>
          <el-table-column label="商品编号" prop="goodsId">
            <template slot-scope="scope">
              <div class="link" @click="viewGoods(scope.row.goodsId)">
                {{ scope.row.goodsId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品状态" prop="saleState" width="100">
            <template slot-scope="scope">
              <el-tag :type="
                      statusMap[scope.row.saleState]
                        ? statusMap[scope.row.saleState].type
                        : ''
                    ">{{
                      statusMap[scope.row.saleState]
                        ? statusMap[scope.row.saleState].name
                        : ""
                    }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="商品价格" prop="price" />
          <el-table-column label="接口渠道" prop="qudaoName" width="250"/>
          <el-table-column label="类型" prop="channelType">
            <template slot-scope="scope">
              <div>
                {{ scope.row.channelType == 2 ? "客服上架" : "接口" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="三方编号" prop="sanfangId" min-width="120"/>
          <el-table-column label="三方价格" prop="sanfangPrice" />

          <el-table-column label="对接时间" prop="createTime" width="160">
            <template slot-scope="scope">
              <div>
                {{ scope.row.updateTime||scope.row.createTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="同步状态" prop="">
            <template slot-scope="scope">
              {{scope.row.sanfangId?'已对接':'未对接'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="text" v-hasPermi="['account:rec:list']" v-if="(checkPermi(['account:rec:list'])&&scope.row.channelType==1)||(checkPermi(['account:scriptPushRec:list'])&&scope.row.channelType==2)" @click="openLogDialog(scope.row)">查看记录</el-button>
              <el-button v-if="!scope.row.sanfangId&&scope.row.saleState==1&&!scope.row.saleName.includes('JIAOYIMAO')" :loading="xiajiaLoading==scope.row.id" type="add" @click="caozuoFn(scope.row,'add')">上架</el-button>
              <el-button v-if="scope.row.sanfangId&&!scope.row.saleName.includes('JIAOYIMAO')" :loading="xiajiaLoading==scope.row.id" type="del" @click="caozuoFn(scope.row,'del')">下架</el-button>
              <el-button v-if="!scope.row.sanfangId" type="del" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              <!-- <el-button v-hasPermi="['partner:partner:deleteErr']" type="del"  icon="el-icon-delete" @click="handleDeleteErr(scope.row)">失败重推</el-button>
              
              <el-button v-hasPermi="['add:price:remove']" type="del" plain icon="el-icon-delete" :loading="exportLoading" @click="rmRec(scope.row)">一键重推</el-button> -->

            </template>
          </el-table-column>
        </el-table>

        <pagination :autoScroll="false" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
    <huoyuanPeizhiDialog ref="huoyuanPeizhiDialog"></huoyuanPeizhiDialog>
    <huliandaishouGoodsInfoDetail ref="huliandaishouGoodsInfoDetail"></huliandaishouGoodsInfoDetail>
    <showLogs ref="showLogs"></showLogs>
  </div>
</template>

<script>
import {
  handleDeleteErrRepush,
  allList,
} from "@/api/partner/partner";
import { delRecNew, scriptdelAllOut } from "@/api/info/rec";
import { mapGetters } from "vuex";

import huoyuanPeizhiDialog from "./huoyuanPeizhiDialog.vue";

import {
  hulianTuisongGoodsList,
  delHulianDaishouShangpin,
} from "@/api/tenantApis/huliandaishou.js";

import huliandaishouGoodsInfoDetail from "./huliandaishouGoodsInfoDetail.vue";
import goodsListApi from "../../../api/gameConfig/goodsList";
import showLogs from "../goodsList/showLogs.vue";
export default {
  name: "QudaoGoodsList",
  components: { huoyuanPeizhiDialog, huliandaishouGoodsInfoDetail, showLogs },
  props: ["params"],
  data() {
    return {
      timer: [],
      statusList: [
        {
          id: "1",
          name: "可用",
        },
        {
          id: "2",
          name: "禁用",
        },
      ],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 销售伙伴表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sanfangId: null,
        channelType: null,
        config: null,
        duijieType: null,
        supplyTenantId:null,
        gameId:null,
        accountNumber:null,
        tuisongAccount:null,
        createTimeStart:'',
        createTimeEnd:'',
        saleState:'',
        goodsId:''
      },
      allQudaoList: [],
      statusMap: {
        0: {
          name: "待审核",
          type: "warning",
        },
        1: {
          name: "在售商品",
          type: "success",
        },
        2: {
          name: "交易中",
          type: "warning",
        },
        3: {
          name: "已售商品",
          type: "",
        },
        4: {
          name: "下架商品",
          type: "danger",
        },
        5: {
          name: "问题商品",
          type: "danger",
        },
        6: {
          name: "损耗商品",
          type: "danger",
        },
        88: {
          name: "回收中",
          type: "warning",
        },
      },
      xiajiaLoading: null,
    };
  },
  // created() {
  //   this.init();
  // },
  computed: {
    ...mapGetters(["userInfo", "shopInfo", "tenantList"]),
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },
  watch: {
    params: {
      handler(newVal) {
        if (newVal&&newVal.config) {
          this.queryParams.config = null;
          if (newVal.config) this.queryParams.config = newVal.config;
          this.init();
        }
      },
      immediate: true,
      deep: true,
    },
    $route: {
      handler(val) {
        if (val.path == "/huliandaishou/qudaoGoodsList") {
          this.init();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    init() {
      this.getList();
      this.getQudaoList();
    },
    /** 查询商品 */
    getList() {
      if(this.queryParams.tuisongAccount&&this.queryParams.tuisongAccount.length<4){
        return this.$message.error('推送账号不能少于4位！')

      }
      this.loading = true;
      if (this.timer && this.timer.length) {
        this.queryParams.createTimeStart = this.timer[0];
        this.queryParams.createTimeEnd = this.timer[1] + " " + "23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      hulianTuisongGoodsList(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 渠道类型改变
    channelTypeChange(e) {
      this.allQudaoList = [];
      this.queryParams.config = "";
      this.getQudaoList();
    },
    // 查询开通的渠道列表
    getQudaoList() {
      allList({
        channelType: this.queryParams.channelType,
      }).then((res) => {
        this.allQudaoList = res.rows;
      });
    },
    // 打开货源配置
    openPushConfig(row) {
      this.$refs.huoyuanPeizhiDialog.open(row);
    },

    // 查看商品详情页
    viewGoods(goodsId) {
      this.$refs.huliandaishouGoodsInfoDetail.open(goodsId);
    },
    // 推送记录  打开
    openLogDialog(row) {
      this.$refs.showLogs.open(row.goodsId, row.saleName, row.channelType);
    },

    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.sanfangId && this.queryParams.sanfangId.length < 4) {
        return this.$message.error("三方编号不能少于4位！");
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset()
      this.handleQuery();
    },
    reset(){
      // 重置参数
      console.log("%c Line:334 🍪 重置参数", "color:#ffdd4d");
      
      this.timer = []
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
    },

    // 删除 上架等
    caozuoFn(row, type) {
      this.$modal
        .confirm(`确认${type == "add" ? "上架" : "下架"}该商品吗？`)
        .then(()=>{
          const obj = {
            id: row.goodsId,
            config: row.config,
            type,
            isHLDS:2
          };
          this.xiajiaLoading = row.id;
          goodsListApi
            .pushApiByGoods(obj)
            .then((res) => {
              this.getList();
              this.xiajiaLoading = null;
              if (res.code == 200) {
                this.$message.success(res.msg);
              }
            })
            .catch((err) => {
              this.xiajiaLoading = null;
            });
        })
        .catch(() => {});
    },

    // 一键重推
    rmRecSubmit() {
      if (this.rmRecType == 1) {
        delRecNew(this.delPartId, this.delGameName)
          .then(() => {
            this.delPartId = "";
            this.rmRecVisible = false;
            this.$modal.msgSuccess("一键重推成功");
          })
          .catch(() => {});
      } else if (this.rmRecType == 2) {
        scriptdelAllOut(this.delPartId, this.delGameName)
          .then(() => {
            this.delPartId = "";
            this.rmRecVisible = false;
            this.$modal.msgSuccess("一键重推成功");
          })
          .catch(() => {});
      }
    },
    // 点击一键重推按钮
    rmRec(row) {
      this.rmRecType = row.channelType;
      this.delPartId = row.saleName;
      this.delGameName = "";
      this.rmRecVisible = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除商品编号为"' + row.goodsId + '"的数据？')
        .then(function () {
          return delHulianDaishouShangpin(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 删除错误记录 */
    handleDeleteErr(row) {
      if (row) {
      } else {
        if (!this.ids || this.ids.length == 0) {
          return this.$message.error("请选择一条数据！");
        }
        if (this.ids && this.ids.length > 1) {
          return this.$message.error("只能选择一条数据！");
        }
      }

      const ids = row.id || this.ids[0];
      this.$modal
        .confirm('是否确认删除序号为"' + ids + '"的错误记录并重新推送？')
        .then(function () {
          return handleDeleteErrRepush({ configId: ids });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("操作成功！");
        })
        .catch(() => {});
    },
  },
};
</script>
<style  lang="scss" scoped>
</style>
